简介:SVG 是 HTML5 中矢量图的标记语言,它保持了强大的绘图能力的同时,具有非常高端的使用接口,通过直接操作 Dom 节点的形式来操作图形。本课程意在让学生掌握 SVG 这门语言和它对应的一些 API,再结合2D绘图的知识,让学生具有对页面复杂图形的渲染和控制能力。
第1章 SVG 入门
介绍 SVG 的技术背景,介绍 SVG 的使用方法、基本图形、基本属性以及基本编程接口,让观众对 SVG 有一个大概的了解,并且通过一个综合的例子「SVG 编辑器」将本章知识点串联起来。
第2章 SVG 中的坐标系统
让学生理解 SVG 中的坐标系统的概念。分别讲述视窗和视野的概念、使用 <g> 标签进行图形分组、以及坐标系和坐标变换的概念及应用。
第3章 颜色、渐变和笔刷
讲述在 SVG 中如何使用颜色、渐变以及笔刷进行丰富的填充和描边。
第4章 Path 高级教程
讲述使用 Path 进行任意图形绘制的命令格式,介绍贝塞尔曲线的概念。然后简单介绍如何把任意 Path 转换成贝塞尔曲线之后制作图形补间。
第5章 SVG 文本
介绍 SVG 中文本的使用、定位,路径文本的使用。顺便介绍在 SVG 中使用超链接的方法。
第6章 图形引用、裁切和蒙版
介绍在 SVG 中如何引用其它图形作为替身,如何用裁剪和蒙版做出更高级的图形效果。
第7章 SVG 动画
介绍一下动画的基本概念,以及在 SVG 中创建动画的两种方式。使用一个引人入胜的例子来介绍。